<template>
  <div class="sort-separate">
    <el-select class="sort-select" :value="currentSortCN" @change="selectSortType">
      <el-option v-for="item in listType" :key="item.value"
                 :value="item.value" :label="item.cn"></el-option>
    </el-select>
    <el-button class="order-toggle" @click="toggleOrderType">
      <svg-icon :icon-name="currentOrderIcon" tooltip="排序方向"></svg-icon>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'SortSeparate', // 分开排序类型和排序方式
  props: {
    listType: { // 是对什么排序，在 constants/sort.js 中定义了有哪些
      type: Array,
      required: true,
    },
    defaultSort: { // 默认的排序类型
      type: String,
      required: true,
    },
  },
  computed: {
    // 获取当前排序
    querySort() { return this.$route.query.sort || this.defaultSort; },
    // 获取当前排序类型（更新、点赞）
    currentSort() { return this.querySort.split('_')[0]; },
    // 获取当前排序方式（倒序、正序）
    currentOrder() { return this.querySort.split('_')[1]; },
    // 当前排序类型（更新、点赞）的中文
    currentSortCN() { return this.$C.sort.sortTypeCN[this.currentSort]; },
    // 当前排序方式（倒序、正序）的图标
    currentOrderIcon() { return this.$C.sort.orderTypeIcon[this.currentOrder]; },
  },
  methods: {
    // 选择排序类型（更新、点赞）
    selectSortType(sort) { this.handleSort({ sort }); },
    // 选择排序方式（倒序、正序）
    toggleOrderType() {
      const [asc, desc] = [this.$C.sort.orderType.asc, this.$C.sort.orderType.desc];
      if (this.currentOrder === asc) this.handleSort({ order: desc });
      else if (this.currentOrder === desc) this.handleSort({ order: asc });
    },
    // 真正处理类型并放到url中的地方
    handleSort({ sort, order }) {
      const realSort = sort || this.currentSort;
      const realOrder = order || this.currentOrder;
      this.$root.$emit('addQuery', { sort: `${realSort}_${realOrder}` });
    },
  },
};
</script>

<style lang="scss">
.sort-separate {
  display: flex;

  .sort-select {
    margin-right: -1px;

    .el-input .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:hover {
        background-color: #f0f0f0;
        z-index: 1;
      }
    }
  }

  .order-toggle.el-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    >span { display: flex; } // svg高度不对

    &:hover, &:focus {
      border-color: #C0C4CC;
      background-color: #f0f0f0;
      color: unset;
      z-index: 1;
    }
  }
}
</style>
